<template>
  <aside class="app-sider" :class="{ 'sider-collapse': isCollapse }">
    <div class="sider-logo">
      <img src="@/assets/logo.png" alt="logo" />
      <h1 v-if="!isCollapse">TEMPLATE</h1>
    </div>
    <el-scrollbar class="sider-menus">
      <side-menu></side-menu>
    </el-scrollbar>
  </aside>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import SideMenu from './SideMenu.vue'

export default defineComponent({
  name: 'Sidebar',
  components: { SideMenu },
  setup() {
    const store = useStore()
    const isCollapse = computed(() => store.getters.collapsed)
    const toggleSideBar = () => store.dispatch('app/toggleCollapsed')

    return {
      isCollapse,
      toggleSideBar
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/vars.scss';

.app-sider {
  flex: 0 0 208px;
  max-width: 208px;
  min-width: 208px;
  width: 208px;
  display: flex;
  flex-direction: column;
  z-index: 9;
  background: $menuBg;
  transition: transform 0.28s;
}

.sider-collapse {
  flex: 0 0 64px;
  max-width: 64px;
  min-width: 64px;
  width: 64px;
  transition-duration: 0.3s;
  transform: translate3d(0, 0, 0);
}

.sider-logo {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

  img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }

  h1 {
    display: inline-block;
    height: 32px;
    margin: 0 0 0 12px;
    color: $subMenuActiveText;
    font-weight: 600;
    font-size: 18px;
    line-height: 32px;
    vertical-align: middle;
  }
}

.sider-menus {
  flex: 1 1 0%;
  overflow: hidden auto;
}
</style>
